<script lang="ts" setup>
import { reactive, ref, computed, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import API from '@/services';
import type { IPageConfigVO } from '@/types/base';
const route = useRoute();
const tableId = ref(route.query.id);
const loading = ref(false);
const pageConfig = reactive<IPageConfigVO>({
  total: 0,
  pageSize: 10,
  pageNum: 1,
  showTotal: true, // 是否显示总数
  showJumper: false, // 是否显示跳转
  showPageSize: true, // 是否显示数据条数选择器
  pageSizeOptions: [10, 20, 30, 40, 50],
  hideOnSinglePage: true
});
// 获取表数据
const getTableData: any = reactive({
  // total: 0,
  data: [] as any[],
  dataColumns: [] as any[]
});
// tabs-->表数据
const getTableDataList = async () => {
  const { pageSize, pageNum } = pageConfig;
  loading.value = true;
  try {
    const { data, code } = await API.dataTable.postDataTableGetDataTableRecord({
      pageSize,
      pageNum,
      tableId: tableId.value as any
    });
    if (code === 200) {
      getTableData.dataColumns = data?.dataFieldList?.map((v: any) => {
        return {
          title: v,
          dataIndex: v
        };
      });
      getTableData.data = data?.pageInfo?.list || [];
      pageConfig.total = data?.pageInfo?.total || 0;
    }
    loading.value = false;
  } catch (e) {
    loading.value = false;
  }
};
// 表格分页 和  改变一页数量
const handlePageChange = (pageNum: any) => {
  pageConfig.pageNum = pageNum;
  getTableDataList();
};
const handlePageSizeChange = (pageSize: any) => {
  pageConfig.pageNum = 1;
  pageConfig.pageSize = pageSize;
  getTableDataList();
};

onMounted(() => {
  console.log('走了mounted');
  getTableDataList();
});
</script>

<template>
  <a-table
    :columns="getTableData?.dataColumns"
    :data="getTableData.data"
    :pagination="pageConfig"
    :loading="loading"
    @page-change="handlePageChange"
    @page-size-change="handlePageSizeChange"
    class="p-18 mt-18 tableDeail"
  >
  </a-table>
</template>
